پیش پردازنده های CSS |بررسی Sass و Less

زبان‌های برنامه‌نویسی همچون C++  با یک مفهوم رایج به نام DRY مواجه هستند و نمی‌توانند کدهای زیادی را کپی کنند. آن ها با مفاهیمی همچون متغیرها و توابع و … رو به رو هستند که می تواند در کد نویسی و سازماندهی کدها به ما کمک بسیاری بکند.

خودت را تکرار نکن (DRY) !

خودت را تکرار نکن (Don’t Repeat Yourself) اصلی در برنامه‌نویسی به معنای عدم تکرار یک یا چند خط کد در قسمت‌های مختلف برنامه است. برنامه‌نویس‌ها برای ایجاد امکان استفاده مجدد از یک تکه کد، آن را در قالب تابع یا کلاس تعریف می‌کنند و در صورت نیاز تابع مورد نظر فراخوانی و یا شی جدیدی از کلاس تعریف می‌شود. در صورت رعایت اصل DRY تغییر در یک جز از برنامه، نیازی به تغییر در قسمت‌های دیگر کد ندارد؛ در نتیجه رفع ایرادهای برنامه و توسعه دادن آن بسیار ساده‌تر خواهد بود.

اما با اینکه CSS به تنهایی برای طراحی صفحات وب بسیار مناسب می باشد دارای نقطه ضعف های بزرگی نیز هست زیرا کدهای آنها از پیش تعریف شده هستند و بارها تکرار می‌شود و شما مجبورید کد های تکراری بنویسید. زمانی که برنامه بسیار بزرگ باشد مدیریت استایل صفحات بسیار دشوار می شود.برای جلوگیری از این تکرارها و نوشتن CSS  به بهترین روش،ما به یک پیش پردازنده (Preprocessor) نیاز داریم تا مشکلات و نقطه ضعف های CSS را برطرف کند و ساختاری قانون‌مند برای کدهای CSS شما ایجاد کند!

پیش پردازنده ها، گسترش یافته­ ی CSS هستند. پیش پردازنده ها تمامی ویژگی هایCSS  به همراه ویژگی های اضافه ­تری مانند متغییر ها، توابع، ترکیب کدها، ارثبری و... را دارا می باشند. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.یک پیش پردازنده از نظر کاربر نهایی کار بزرگی را انجام نمی دهد اما می تواند سریعتر و راحت تر توسعه پیدا کند.

مثلاً فرض کنید، مشتری از ما درخواست طراحی سایت کرده است و ما به طور کامل و براساس سلیقه مشتری سایت را طراحی و تحویل داده ایم. پس از مدتی مشتری درخواست میکند تا رنگ قالب سایت را از سبز به طوسی تغییر دهیم. حال در حالت ساده CSS مجبور هستیم درکل چندهزار خط کد برنامه بگردیم و هر جایی که از رنگ سبز استفاده کرده ایم را پیدا کرده و آنرا به طوسی تغییر دهیم. واضح است که این فرایند بسیار زمانبر و دارای خطا می باشد.  ولی در هنگام استفاده از پیش پردازنده ها چون امکان تعریف متغیر را داریم میتوانیم یک متغیر برای رنگ اصلی تعریف کرده و هر جا لازم بود از آن استفاده کنیم. حال برای تغییر رنگ فقط کافی است مقدار متغیر را تغییر دهیم تا در کل برنامه مقدار آن تغییر کند.

پیش پردازنده های مختلفی برای CSS وجود دارند که از معروف ترین آنها می توان به Less , Stylus   و Sass  اشاره کرد. هیچ کدام از اینها جایگزینی برای CSS نیستند فقط برنامه نویسی با آنرا راحتتر میکنند و در نهایت کامپیایل شده و به CSS  تبدیل میشوند زیرا مرورگر فقط CSS  را میفهمد.

ما در اینجا به بررسی  less  و sass میپردازیم. 

less مخفف Leaner Style Sheets و sass مخفف Syntactically Awesome Style Sheets می باشد.

  Lessو Sass هر دو به بهینه سازی کدهای زبان  CSSکمک می‌کنند و دارای شباهت ها و تفاوت هایی هستند که در این مقاله با آن ها آشنا خواهید شد.

♦ شباهت ها :

• متغیرها:  شما قادر خواهید بود تا اطلاعات را در متغیر ها ذخیره کرده تا بعدا در صورت نیاز، بتوانید از آنها استفاده کنید. مانند دیگر زبان‌های برنامه‌نویسی در زمان نیاز به فراخوانی، تنها نوشتن نام متغیر کفایت می‌کند.
• توابع:  به کمک توابع، طراحی و پیاده سازی ساده خواهد شد. شما می توانید از توابع ریاضی همچون، جمع، تقسیم، ضرب، تفریق و درصد استفاده کنید. با این کار می توانید اندازه داده ها و متغیر ها را کنترل کنید.
• گروه بندی کدها: گروه بندی کدها یا  Mixins، در واقع همان Template ها هستند. شما می توانید این گروه بندی ها را خودتان ایجاد کنید و یا با استفاده از Framework، آنها را به کد خود اضافه کنید.
• دستورات تو در تو یا   Nesting :در CSS امکان استفاده از دستورات تو در تو وجود ندارد. با این حال پیش پردازنده ها، به کاربران اجازه می دهند تا برای کاهش کدهای تکراری و ساده سازی روند نوشتن از کلاس های تو در تو استفاده کنند.
• وراثت یا Inheritances : امکان رسیدن اطلاعات از یک انتخاب کننده به انتخاب کننده ای دیگر وجود دارد. این کار از طرفی باعث تسهیل برنامه نویسی شده و از طرفی دیگر، تعداد خطوط برنامه نویسی را نیز کاهش می دهد.
• حلقه ها:  یکی دیگر از مزایای پیش پردازنده ها، توانایی ایجاد حلقه ها است. در حلقه ها فرامین تکرار می شوند تا در نهایت به وضعیتی که توسط شما تعریف شده است، برسند.
• فایل های جزئی یا Partial : این فایل ها تعداد کمی از خطوط برنامه نویسی شده CSS در آنها وجود دارد و می توانند در کدهای Less و Sass به وسیله یک سری فرمان ها، وارد شده و با آنها ادغام شوند.

♦ تفاوت ها :

• Sass   یک زبان سمت سرور (server-side) است و فقط بر روی Ruby  اجرا می شود اما کامپایلر اصلی Less با استفاده از جاوا اسکریپت نوشته شده و یک زبان سمت کاربر  (Client-Side) می باشد و در صورتیکه کاربر جاوااسکریپت را غیر فعال کند با مشکل مواجه میشود.
• تفاوت اصلی میان Sass و Less درواقع مربوط به توابع منطقی است Less. این امکان را به کاربر می دهد که شرایط بخصوصی به وقوع پیوست،Mixins  را فعال کند. در Sass ما از دایرکتیو Mixin استفاده می کنیم اما در Less درست به شکل یک سلکتور کلاس تعریف می کنیم.
• کاربران با استفاده از Sass قادر خواهند بود تا بین “intended syntax” و “SCSS”  بتوانند یکی را انتخاب کنند. هر وبمستری می تواند انتخاب کند که آیا می خواهد به اصول اصلی و ارجینال پایبند باشد یا از قوانین CSS اجتناب کند. اما در Less این امکان انتخاب از فرد سلب شده و وی حق انتخاب ندارد. در اینصورت افراد باید با قوانین قدیمی خود را تطبیق دهند.
• Less  در حلقه ها فقط می تواند بر روی داده های عددی پیمایش انجام دهد ولیSass  می تواند روی تمام نوع داده ها پیمایش انجام دهد که خیلی کاربردی می باشد.
• نمایش خطاها در Less دقیق تربوده و این امکان کار را برای توسعه دهنده , آسان تر می کند.

مسلما با این میزان تنوع امکان یادگیری تمام این پلتفرم ها و حتی شناخت تک تک آنها برای یافتن ساده ترین و مناسبترین آنها برای استفاده ممکن نیست. کارشناسان مختلف، آنچنان نظرات ضد و نقیضی بیان کرده اند، که عملا کار انتخاب یکی از این پلتفرم ها را دشوارتر می کند. پیشنهاد ما این است که یکی از این پلتفرم های برنامه نویسی برای استایل دهی صفحات وب را بخوبی فرا بگیرید و استفاده کنید. اگر هر یک از این پلتفرم ها را بصورت صد در صد فرا بگیرید، نیازی به جایگزینی آن با پلتفرم دیگری ندارید. در نهایت امر میتوان خروجی Css، در همه این پلتفرم ها را ویرایش کرد. بنابراین جای نگرانی برای انتخاب پلتفرم برنامه نویسی Css نیست.

فناوری اطلاعات تریداتس | طراحی سایت تریداتس | مجوزهای تریداتس | مدیریت سرور تریداتس | سئو تریداتس

► مقالات مرتبط

سئو چیست؟ آشنایی کامل با مفاهیم سئوی داخلی( قسمت دوم )

آشنایی با فریم ورک AngularJS، مزایا و معایب آن

Django چیست ؟ ۱۵ مزیت استفاده از Django

آشنایی کامل با فریم ورک AMP

React js چیست؟